鐵人賽第21天了，我App核心互動體驗已經在第二週建立起來。現在要開始將先前規劃中預留的空間一一填滿，讓App的功能更加完整。根據開發藍圖，今天的主軸是UI的擴充實作～

主要有兩大重點：

• 為每張靈感卡片加上「筆記記錄區」的UI。
• 建立一個獨立的「設定頁」來管理未來的各項功能 。

這兩塊今天雖只先建構畫面，尚未串接完整功能，但是承先啟後的重要步驟，筆記區將在明天與語音輸入功能結合 ，而設定頁則是為使用者提供了客製化與管理權限的入口。

一、根據Wireframe實作卡片上的「筆記記錄區」

還記得在Day 8設計卡片UI時，我們特意在下方按鈕區的上方，為「筆記記錄區」預留了空間嗎 ？今天就是要把這個設計從Wireframe變為現實的時候了。

設計思路：

為了不讓主畫面過於雜亂，筆記區預設為收合狀態，只有在使用者點擊特定圖示後才會展開。這樣的設計可以讓使用者在滑動卡片時，專注於靈感本身，在需要記錄時才喚出輸入介面。

UI 實作細節：

1. 觸發入口：在卡片摘要的下方，原先的留白處，加入一個IconButton，圖示可以選用notes或edit，讓使用者直觀地了解其功能。

2. 展開式輸入區：點擊按鈕後，利用ExpansionTile或自定義的動畫來流暢地展開一個輸入區域。這個區域包含：

• 一個 TextField Widget，提供多行輸入功能，並加上提示文字，例如「在這裡記錄你的想法...」。
• 一個麥克風圖示的: IconButton，這是為 Day 22 的「語音轉文字」功能預先準備的 UI 入口 。
• 一個「儲存」按鈕，用於將筆記與當前的靈感卡片關聯並存至 Firestore。

3. 狀態管理：為了控制每個卡片筆記區的獨立開闔狀態，我們需要在卡片的狀態管理中加入一個布林值（e.g., isNoteAreaExpanded）來控制其可見性。

這個UI實作，完美呼應了我在第二、三週專注於核心UI與優化的目標。

Flutter Widget結構示意：

Column(
  children: [
    // ... 卡片摘要、標籤等內容
    IconButton(
      icon: Icon(Icons.notes),
      onPressed: () {
        // 更新狀態，展開筆記區
      },
    ),
    if (isNoteAreaExpanded) ...[
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: TextField(
          maxLines: 4,
          decoration: InputDecoration(
            hintText: '在這裡記錄你的想法...',
            border: OutlineInputBorder(),
          ),
        ),
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          IconButton(
            icon: Icon(Icons.mic),
            onPressed: () {
              // Day 22: 語音轉文字功能
            },
          ),
          ElevatedButton(
            onPressed: () {
              // 儲存筆記到 Firestore
            },
            child: Text('儲存'),
          ),
        ],
      ),
    ],
    // ... 下方的保留、捨棄、收藏、分享按鈕
  ],
)

二、建立「設定頁」UI

一個成熟的App不能沒有設定頁，這是使用者進行個人化設定、管理App權限的地方，雖然許多功能會在後續迭代中才會加入，但預先建立好這個框架是至關重要的 。

設定頁的規劃包含兩個主要入口 ：

1. RSS來源管理：

• 目標：讓使用者未來可以自訂他們想追蹤的RSS feed來源。
• UI設計：目前會以一個簡單的ListView呈現，顯示當前的RSS白名單來源 。頁面右上角會放置一個「新增」按鈕，點擊後可以跳轉至新增頁面（或彈出對話框），不過今天只會先將UI介面做出來。

2. 權限設定：

• 目標：集中管理App所需的各項系統權限，例如麥克風（用於語音筆記 ）、推播通知（用於 FCM ）等。
• UI 設計：使用ListTile來逐項列出權限。每個ListTile會顯示權限名稱、目前狀態（已授權／未授權），並提供一個按鈕，讓使用者可以方便地跳轉到系統的App設定頁面去手動開啟或關閉權限。

Flutter Widget 結構示意：

Scaffold(
  appBar: AppBar(
    title: Text('設定'),
  ),
  body: ListView(
    children: [
      ListTile(
        title: Text('RSS 來源管理'),
        leading: Icon(Icons.rss_feed),
        trailing: Icon(Icons.arrow_forward_ios),
        onTap: () {
          // 導航到 RSS 管理頁面
        },
      ),
      ListTile(
        title: Text('權限設定'),
        leading: Icon(Icons.security),
        trailing: Icon(Icons.arrow_forward_ios),
        onTap: () {
          // 導航到權限設定頁面
        },
      ),
      // ... 其他設定選項，如「關於我們」、「版本號」等
    ],
  ),
)

明日預告：語音轉文字筆記功能

今天將App的UI骨架再度擴充，完成了筆記區和設定頁的畫面，雖然只是靜態的UI實作，但這一步為接下來的功能開發打下了堅實的基礎：）

下一步，明天將接一個非常有趣的核心功能挑戰：導入導入speech_to_text套件，將今天做好的筆記區UI與麥克風按鈕結合，實現「語音轉文字筆記」的酷炫功能，明天見～

【哈囉你好：）感謝你的閱讀！其他我會常出沒的地方：Threads】